import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import { Form, Button, Select, Input, Row, Col, DatePicker } from 'antd';

const formlayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const { RangePicker } = DatePicker;
const searchIdOptions = [
  { value: 'cid', label: 'cid' },
  { value: 'uid', label: 'uid' },
];

const SearchForm = (props: any, ref: any) => {
  const [form] = Form.useForm();
  useEffect(() => {
    formSubmit();
  }, []);
  useImperativeHandle(ref, () => {
    return {
      formSubmit,
    };
  });
  const onFinish = (values: any) => {
    const time = values.time;
    if (time) {
      values.time = [
        time?.[0].format('YYYY-MM-DD HH:mm:ss'),
        time?.[1].format('YYYY-MM-DD HH:mm:ss'),
      ];
    }
    props.getPage(values);
  };

  const formSubmit = () => {
    form.submit();
  };
  return (
    <Form form={form} onFinish={onFinish} {...formlayout} name="search-form">
      <Row>
        <Col span={12}>
          <Form.Item label={'查询id类型'} name="serachIdtype">
            <Select options={searchIdOptions} placeholder={'cid, uid'} />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="id值" name="searchId">
            <Input placeholder={'abcdrffafad'} />
          </Form.Item>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <Form.Item label={'时间'} name="time">
            <RangePicker showTime />
          </Form.Item>
        </Col>
        <Col span={12} className="text-right">
          <Form.Item wrapperCol={{ span: 24 }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
};

export default forwardRef(SearchForm);
